import React, { Component } from 'react';
import Image from 'react-uwp';
import { connect } from 'react-redux';
import { Modal, Button, Icon, Input } from 'antd';
import { closeUnCommentModal, postComment } from '../../store/user/comment';
const { TextArea } = Input;
const MAXSIZE = 1024 * 1000 * 1000;
class UnCommentModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      content: ''
    };
  }
  fileSources = [];
  onChange = e => {
    e.preventDefault();
    let files;
    if (e.dataTransfer) {
      files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }
    const reader = new FileReader();
    reader.onload = () => {
      let { fileList } = this.state;
      fileList.push(reader.result);
      this.setState({ fileList });
    };
    if (files[0].size > MAXSIZE) {
      Modal.warning({ title: '图片大小不能超过10M', centered: true });
      return;
    }
    for (let item of this.fileSources) {
      if (item.name == files[0].name) {
        Modal.warning({ title: '该图片已上传', centered: true });
        return;
      }
    }
    this.fileSources.push(files[0]);
    reader.readAsDataURL(files[0]);
  };
  content = value => {
    this.setState({ content: value });
  };
  comment = () => {
    const { detail, commentOrder } = this.props;
    const { content, fileList } = this.state;
    return (
      <div style={{ minHeight: '10rem' }}>
        <div className="dfr">
          <span className="label">标题</span>
          <span>{commentOrder ? commentOrder.product.title : ''}</span>
        </div>
        <div
          className="dfr"
          style={{ alignItems: 'start', marginTop: '0.6rem' }}
        >
          <span className="label">评价</span>
          <TextArea
            rows={5}
            value={content}
            onChange={e => this.content(e.target.value)}
          />
        </div>
        <div className="dfr">
          <span className="label" />
          <ul>
            {fileList && fileList.length > 0
              ? fileList.map((img, index) => {
                  return (
                    <li key={index} className="imgItem">
                      <img src={img} className="imgCover" />
                    </li>
                  );
                })
              : null}
            {this.renderUpload()}
          </ul>
        </div>
      </div>
    );
  };
  renderUpload() {
    return (
      <li
        className="imgItem dfcc"
        style={{ background: '#fff', border: '1px solid #F3B10F' }}
      >
        <label htmlFor="cUpload" className="dfcc">
          <Icon type="plus" />
          <div className="ant-upload-text">Upload</div>
        </label>
        <input
          type="file"
          id="cUpload"
          style={{ height: 0, width: 0 }}
          onChange={this.onChange}
          accept="image/png, image/jpeg, image/gif, image/jpg"
        />
      </li>
    );
  }
  handleOk = () => {
    const { content, fileList } = this.state;
    this.props.postComment({ content, fileList });
    this.setState({
      fileList: [],
      content: ''
    });
    this.fileSources = [];
  };

  cancel = () => {
    this.fileSources = [];
    this.setState({
      fileList: [],
      content: ''
    });
    this.props.closeUnCommentModal();
  };
  render() {
    const { visible, closeUnCommentModal, loading } = this.props;
    return (
      <Modal
        className="commentModal"
        visible={visible}
        title="我的评论"
        onCancel={() => this.cancel()}
        footer={[
          <Button
            key="submit"
            type="primary"
            loading={loading}
            onClick={this.handleOk}
          >
            提交
          </Button>,
          <Button key="back" onClick={() => this.cancel()}>
            取消
          </Button>
        ]}
      >
        {this.comment()}
      </Modal>
    );
  }
}
const mapStateToProps = state => ({
  visible: state.comment.unCommentModal.visible,
  loading: state.comment.unCommentModal.loading,
  commentOrder: state.comment.commentOrder
});
const mapDispatchToProps = {
  closeUnCommentModal,
  postComment
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UnCommentModal);
